<template>
  <div class="app-container">
    <el-dialog
      title="编辑"
      append-to-body="true"
      :visible.sync="dialogVisible"
      :open-delay="findRoleList"
      width="30%">
      <el-form style="width: 100%">
        <el-form-item label="登录帐号">
          <el-input v-model="from.userName"></el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="from.password"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="from.nickName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="from.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="from.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <template>
            <el-radio v-model="from.sex" :label="1">男</el-radio>
            <el-radio v-model="from.sex" :label="2">女</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="用户类型">
          <template>
            <el-radio v-model="from.userType" :label="1">普通用户</el-radio>
            <el-radio v-model="from.userType" :label="2">平台用户</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="选择角色" style="width: 100%">
          <el-select v-model="from.sysRole.id" placeholder="请选择角色">
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="doSave">确 定</el-button>
    </span>
      </template>
    </el-dialog>

    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="查询条件">
        <el-input clearable v-model="queryParams.keyword" placeholder="用户名/手机号/邮箱"></el-input>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-select v-model="queryParams.userType" placeholder="普通/平台用户">
          <el-option label="普通用户" value="1"></el-option>
          <el-option label="平台用户" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.enabled" placeholder="启用/禁用">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <div class="block">
          <el-date-picker
            :change="changeDate"
            v-model="queryDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="pageList">查询</el-button>
        <el-button type="success" @click="dialogVisible = true;from={sysRole: {}}">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      max-height="40%"
      style="width: 100%">
      <el-table-column
        prop="createTime"
        label="添加时间"
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="登录帐号"
      >
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="用户昵称"
      >
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="sexStr"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="userTypeStr"
        label="用户类型">
      </el-table-column>
      <el-table-column
        label="状态">
        <template #default="scope">
          <el-switch
            v-model="scope.row.enabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="lastUpdateTime"
        label="最后修改密码时间">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-link :underline="false" icon="el-icon-edit" @click="openModifyWin(scope.row)" style="margin: 10px"></el-link>
          <el-link :underline="false" icon="el-icon-delete" @click="delById(scope.row.id)" style="margin: 10px"></el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :page-size="10"
      :pager-count="7"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import user from "@/api/system/user";
  import role from "@/api/system/role";

  export default {
    data() {
      return {
        queryParams: {},
        from: {sysRole: {}},
        queryDate: [],
        total: 0,
        tableData: [],
        roles: [],
        dialogVisible: false
      }
    },
    created() {
      this.pageList();
      this.findRoleList();
    },
    methods: {
      pageList() {
        user.pageList(this.queryParams).then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
      },
      findRoleList() {
        role.getAll().then((res) => {
          if (res) {
            this.roles = res;
          }
        })
      },
      doSave() {
        user.modify(this.from).then((res) => {
          this.$notify({
            title: '操作成功提示',
            message: this.$createElement('i', {style: 'color: teal'}, res.message)
          });
          if (res.success) {
            this.dialogVisible = false;
            this.pageList();
          }
        })
      },
      openModifyWin(data) {
        this.dialogVisible = true;
        user.get(data.id).then((res => {
          this.from = res;
        }))
      },
      delById(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          user.del(id).then((res) => {
            this.$notify({
              title: '操作成功提示',
              message: this.$createElement('i', {style: 'color: teal'}, res.message)
            });
            if (res.success) {
              this.pageList();
            }
          })
        })

      },
      updateUserEnabled(id) {
        alert("---------")
        user.updateUserEnabled(id).then((res) => {
          this.$notify({
            title: '操作提示',
            message: this.$createElement('i', {style: 'color: teal'}, res.message)
          });
        })
      },
      changeDate() {
        if (this.queryDate) {
          this.queryParams.beginCreateTime = this.queryDate[0];
          this.queryParams.endCreateTime = this.queryDate[1];
        } else {
          this.queryParams.beginCreateTime = '';
          this.queryParams.endCreateTime = '';
        }
      }
    }
  }
</script>

<style>

</style>
